<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="${ctx}/lay/css/layui.css"/>
    <style>
        .baidu-translate-hide {
            display: none;
        }
    </style>
</head>
<body>

    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="width: 768px;margin: 10px auto;">
        <ul class="layui-tab-title">
            <li class="layui-this">接口文档</li>
            <li>数据库文档</li>
        </ul>

        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form" action="" style="width: 100%;">
                    <div class="layui-form-item">
                        <label class="layui-form-label" id="swaggerUrlTips"><span style="color: red;">*</span>接口地址</label>
                        <div class="layui-input-block">
                            <input type="text" id="swaggerUrl" name="swaggerUrl"  lay-verify="required|url" lay-verType="tips" lay-reqText="接口地址必填！" placeholder="Swagger 接口文档地址（例如：http://192.168.0.81:9090/demo）"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">*</span>项目名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="documentName" name="documentName"  lay-verify="required" lay-verType="tips" lay-reqText="项目名称必填！" placeholder="请输入项目名称（例如：XX快速开发平台）"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" id="autoTranslateTips">自动翻译</label>
                        <div class="layui-input-block">
                            <input type="checkbox" id="autoTranslate" name="autoTranslate" value="true" lay-filter="autoTranslate" lay-skin="switch" lay-text="开|关">
                        </div>
                    </div>
                    <div class="layui-form-item baidu-translate baidu-translate-hide">
                        <label class="layui-form-label"><span style="color: red;">*</span>APP_ID</label>
                        <div class="layui-input-block">
                            <input type="text" id="baiduAppId" name="baiduAppId" placeholder="请输入百度翻译APP ID（例如：2019*********9668）" lay-verType="tips" lay-reqText="APP_ID必填！" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item baidu-translate baidu-translate-hide">
                        <label class="layui-form-label"><span style="color: red;">*</span>密钥</label>
                        <div class="layui-input-block">
                            <input type="text" id="baiduAppKey" name="baiduAppKey" placeholder="请输入百度翻译密钥（例如：VIaBC**********xVw8S）"  lay-verType="tips" lay-reqText="密钥必填！" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="swaggerForm">生成文档</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" action="" style="width: 100%;">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">*</span>jdbcUrl</label>
                        <div class="layui-input-block">
                            <input type="text" id="jdbcUrl" name="jdbcUrl" lay-verify="required" lay-verType="tips" lay-reqText="数据库链接（jdbcUrl）必填！" placeholder="请输入数据库链接地址（例如：jdbc:mysql://127.0.0.1:3306/test）"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">*</span>用户名</label>
                        <div class="layui-input-block">
                            <input type="text" id="userName" name="userName"  lay-verify="required" lay-verType="tips" lay-reqText="数据库用户名必填！" placeholder="请输入数据库用户名（例如：root）"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">*</span>密码</label>
                        <div class="layui-input-block">
                            <input type="text" id="password" name="password" lay-verify="required" lay-verType="tips" lay-reqText="数据库密码必填！" placeholder="请输入数据库密码（例如：123456）" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">表名</label>
                        <div class="layui-input-block">
                            <input type="text" id="ignoreTableNames" name="ignoreTableNames" placeholder="请输入忽略导出表名，多个 “,” 隔开" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">表名前缀</label>
                        <div class="layui-input-block">
                            <input type="text" id="ignoreTablePrefixs" name="ignoreTablePrefixs" placeholder="请输入忽略导出表名前缀，多个 “,” 隔开" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">表名后缀</label>
                        <div class="layui-input-block">
                            <input type="text" id="ignoreTableSuffixs" name="ignoreTableSuffixs" placeholder="请输入忽略导出表名后缀，多个 “,” 隔开" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">*</span>项目名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="dbDocumentName" name="dbDocumentName" lay-verify="required" lay-verType="tips" lay-reqText="项目名称必填！" placeholder="请输入项目名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="dbForm">生成文档</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="${ctx}/jq/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/lay/layui.js"></script>
    <script type="text/javascript">

        //弹出下载框
        function download(url) {
            var content = "file content!";
            var data = new Blob([content], {
                type: "text/plain;charset=UTF-8"
            });
            var anchor = document.createElement("a");
            anchor.href = url;
            anchor.click();
            window.URL.revokeObjectURL(data);
        }

        layui.use(['form', 'jquery', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;

            $('#swaggerUrlTips').mouseover(function () {
                console.log(1);
                layer.tips('文档地址为 http://192.168.0.81:9090/demo/doc.html，则应填 http://192.168.0.81:9090/demo。注意，不能以 / 符号结尾！', '#swaggerUrl', {
                    tips: [2, '#3595CC']
                });
            });
            $('#autoTranslateTips').mouseover(function () {
                console.log(1);
                layer.tips('申请地址：https://api.fanyi.baidu.com/product/111', '#autoTranslateTips', {
                    tips: [4, '#3595CC']
                });
            });
            form.on('switch(autoTranslate)', function(data){
                if (data.elem.checked) {
                    $('.baidu-translate').removeClass('baidu-translate-hide');
                    $('#baiduAppId').attr('lay-verify', 'required');
                    $('#baiduAppKey').attr('lay-verify', 'required');
                } else {
                    $('.baidu-translate').addClass('baidu-translate-hide');
                    $('#baiduAppId').removeAttr('lay-verify');
                    $('#baiduAppKey').removeAttr('lay-verify');
                }
            });

            // swagger导出
            form.on('submit(swaggerForm)', function(data){
                $.ajax({
                    url: '${ctx}/swagger/toWord',
                    type: "post",
                    dataType: "json",
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    beforeSend: function (xhr) {
                        layer.load(1, {shade: 0.5});
                        $(data.elem).addClass('layui-btn-disabled').attr('disabled', 'disabled');
                    },
                    success: function (d) {
                        layer.closeAll();
                        if (d.code == '1') {
                            layer.msg('接口文档生成成功，即将下载...', {icon: 1, time: 1000, shade: 0.5}, function () {
                                download('${ctx}/swagger/download/' + d.path + '?fileName=' + data.field.documentName);
                            });
                        } else {
                            layer.msg(d.error, {icon: 2});
                        }
                        $(data.elem).removeClass('layui-btn-disabled').removeAttr('disabled');
                    },
                    error: function (d) {
                        layer.closeAll();
                        layer.msg(d.err, {icon: 2});
                        $(data.elem).removeClass('layui-btn-disabled').removeAttr('disabled');
                    }
                });
                return false;
            });

            // db导出
            form.on('submit(dbForm)', function(data){
                var field = data.field;
                $.ajax({
                    url: '${ctx}/db/toWord',
                    type: "post",
                    dataType: "json",
                    contentType: 'application/json',
                    data: JSON.stringify(field),
                    beforeSend: function (xhr) {
                        layer.load(1, {shade: 0.5});
                        $(data.elem).addClass('layui-btn-disabled').attr('disabled', 'disabled');
                    },
                    success: function (d) {
                        layer.closeAll();
                        if (d.code == '1') {
                            layer.msg('数据库文档生成成功，即将下载...', {icon: 1, time: 1000, shade: 0.5}, function () {
                                download('${ctx}/db/download/' + d.path + '?fileName=' + field.dbDocumentName);
                            });
                        } else {
                            layer.msg(d.error, {icon: 2});
                        }
                        $(data.elem).removeClass('layui-btn-disabled').removeAttr('disabled');
                    },
                    error: function (d) {
                        layer.closeAll();
                        layer.msg(d.err, {icon: 2});
                        $(data.elem).removeClass('layui-btn-disabled').removeAttr('disabled');
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>
